<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>计算器</title>
    <style type="text/css">
      table {
        margin: auto;
      }

      .screen {
        height: 50px;
        width: 250px;
        text-align: right;
      }

      td input {
        width: 60px;
        height: 50px;
      }

      .two {
        width: 125px;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <!-- 最上方的屏幕 -->
        <td colspan="4">
          <input type="text" class="screen" />
        </td>
      </tr>
      <tr>
        <td><input type="button" value="1" class="btn" /></td>
        <td><input type="button" value="2" class="btn" /></td>
        <td><input type="button" value="3" class="btn" /></td>
        <td><input type="button" value="+" class="btn" /></td>
      </tr>
      <tr>
        <td><input type="button" value="4" class="btn" /></td>
        <td><input type="button" value="5" class="btn" /></td>
        <td><input type="button" value="6" class="btn" /></td>
        <td><input type="button" value="-" class="btn" /></td>
      </tr>
      <tr>
        <td><input type="button" value="7" class="btn" /></td>
        <td><input type="button" value="8" class="btn" /></td>
        <td><input type="button" value="9" class="btn" /></td>
        <td><input type="button" value="*" class="btn" /></td>
      </tr>
      <tr>
        <td><input type="button" value="0" class="btn" /></td>
        <td colspan="2"><input type="button" value="=" class="btn two" /></td>
        <td><input type="button" value="/" class="btn" /></td>
      </tr>
      <tr>
        <td><input type="button" value="." class="btn" /></td>
        <td colspan="2"><input type="button" value="AC" class="btn two" /></td>
        <td><input type="button" value="<=" class="btn" /></td>
      </tr>
    </table>
    <script>
      window.onload = function () {
        let btn = document.getElementsByClassName("btn");
        let screen = document.getElementsByClassName("screen")[0];
        for (let i = 0; i < btn.length; i++) {
          btn[i].onclick = function () {
            //  清除
            if (this.value == "AC") {
              screen.value = "";
            } 
            // 回退
            else if (this.value=='<='&&screen.value!='') {
              screen.value=screen.value.substr(0,screen.value.length-1)
            }


            // 等于
            else if (this.value=='='&&screen.value!='') {
              screen.value=eval(screen.value)
            }
            else if (this.value=='='&&screen.value=='') {
              screen.value=''
            }
            
            // 其他键
            else if(screen.value==''&&(
              this.value=='-'||
              this.value=='+'||
              this.value=='*'||
              this.value=='/'

            )){
              screen.value=''
            }else{
              screen.value+=this.value
            }
          };
        }
      };
    </script>
  </body>
</html>
